import React, {Component} from 'react';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
import { Badge } from 'antd-mobile'

import './tabbar.less';

const mapState=(state)=>{
    return{
        pageTitle: state.ui.pageTitle,
        isSubpage: state.ui.isSubpage,
        totalCount:state.cart.list.reduce((result,item)=>{
            result+=item.count;
            return result;
        },0)
    }

};
@connect(mapState)
@withRouter//装饰器模式写法，需babel-plugin-transform-decorators-legacy插件
class Tabbar extends Component {

    onItemClick=(path)=>{
        this.props.history.push(path);
    };
    // getIcon=(path)=>{
    //     switch (path) {
    //         case '/home':
    //             return  <span className='icon'>&#xe630;</span>
    //         case '/mall':
    //             return  <span className='icon'>&#xe620;</span>
    //         case '/cart':
    //             return  <span className='icon'>&#xe62b;</span>
    //         case '/mine':
    //             return  <span className='icon'>&#xe62a;</span>
    //         default:
    //             break;
    //     }
    // }

    render() {
        const currentPath=this.props.location.pathname;
        if(this.props.isSubpage){
            return [];
        }
        return (
            <div className="pro-tabbar ">
                {
                    this.props.routes.map(route=>{
                        const cls=(route.path===currentPath) ? 'pro-tabbar-item active':'pro-tabbar-item';
                        return(
                            <div
                                key={route.path}
                                className={cls}
                                onClick={this.onItemClick.bind(this,route.path)}>
                                {
                                    route.path==='/cart'?
                                        <Badge text={this.props.totalCount} overflowCount={99}>
                                            <span className='icon' dangerouslySetInnerHTML={{__html:route.icon}} />
                                        </Badge>:
                                        <span className='icon' dangerouslySetInnerHTML={{__html:route.icon}} />
                                }
                                    {/*{this.getIcon(route.path)}*/}
                                <span className="text">{route.title}</span>

                            </div>
                            )
                    })
                }
            </div>
        );
    }
}

// export default withRouter(Tabbar);
export default Tabbar;